<template>
  <div class="left">
<!--    <el-row class="but-l">-->
<!--      <el-button type="primary" round @click="opencam">开启相机</el-button>-->
<!--      <el-button type="info" round style="margin-left: 10px" @click="closecam">关闭相机</el-button>-->
<!--    </el-row>-->
    <div class="box">
      <dv-border-box12>
        <img :src=picurl style="margin-top: 10px;margin-left:12px; height: 450px;width: 830px;margin-bottom: 10px">
      </dv-border-box12>
    </div>
  </div>
</template>

<script>
export default {
  name: 'left',
  data () {
    return {
      userId: 1
    }
  },
  methods: {
    initWebSocket () {
      // 连接错误
      this.websocket.onerror = this.setErrorMessage

      // 连接成功
      this.websocket.onopen = this.setOnopenMessage

      // 收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage

      // 连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage

      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    },
    setErrorMessage () {
      console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
    },
    setOnopenMessage () {
      console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
    },
    setOnmessageMessage (event) {
      // 根据服务器推送的消息做自己的业务处理
      console.log('服务端返回：' + event.data)
    },
    setOncloseMessage () {
      console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
    },
    onbeforeunload () {
      this.closeWebSocket()
    },
    closeWebSocket () {
      this.websocket.close()
    }

  },
  mounted () {
    // WebSocket
    if ('WebSocket' in window) {
      this.websocket = new WebSocket('ws://localhost:8088/ws/awdMatch/' + this.userId)
      this.initWebSocket()
    } else {
      alert('当前浏览器 Not support websocket')
    }
  },
  beforeUnmount () {
    this.onbeforeunload()
  }
}

</script>

<style lang="scss">
.left{
  flex-direction: column;
  display: flex;
  width: 50%;
  height: 70%;
  margin-left: 150px;
}
.dv-decoration-12{
  width: 50%;
}
.box{
  display: flex;
  margin-top: 10px;
}
.but-l{
  justify-content:space-around;
}
</style>
